<template>
  <!-- 填写注册验证码 注册并登录 -->
  <layout :title="title" background="#fff">
    <view
      class="screen"
      style="height: 100vh"
      :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'"
    >
      <view class="login_title">填写验证码</view>
      <div class="remind_content">
        <view class="remind-text">验证码已发送至{{ phoneNo }}</view>
        <u-message-input
          mode="bottomLine"
          @finish="finish"
          :maxlength="6"
          :breathe="true"
        ></u-message-input>
        <view class="remind-text1">
          <view v-if="!codeDisabled">{{ loadTime }}秒后重新获取</view>
          <view class="default-button" v-if="codeDisabled" @click="getCode()"
            ><text>重新获取验证码</text></view
          >
          <!-- <u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode"
						@change="codeChange" :startText="startText" :changeText="changeText" :endText="endText">
					</u-verification-code>
					<u-button v-if="codeDisabled" class="default-button" @tap="getCode">{{tips}}</u-button> -->
        </view>
      </div>

      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "",
        color: "black",
        iconText: "", //导航栏文字
      },
      title: "注册",
      type: "",
      phoneNo: "",
      verificationCode: "",
      tips: "",
      seconds: 60,
      refCode: null,
      startText: "重新获取验证码",
      changeText: "X秒重新获取",
      endText: "重新获取验证码",
      loadTime: 60,
      openId: "",
      codeDisabled: true,
      timer: "",
    };
  },
  onLoad(option) {
    this.openId = option.openId;
    this.type = option.type;
    if (this.type === "replace") {
      this.title = "换绑手机号";
    }
    this.phoneNo = option.phoneNo;
    // this.hasSend = option.hasSend == 1;
  },
  onShow() {
    this.loadTime = 60;
    this.codeDisabled = true;
    // this.getCode();
  },
  watch: {},
  methods: {
    getTime() {
      this.loadTime--;
      if (this.loadTime === 0) {
        clearInterval(this.timer);
        this.codeDisabled = true;
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      let req;
      // console.log(this.$refs.uCode.canGetCode)
      // if (this.$refs.uCode.canGetCode) {
      if (this.codeDisabled) {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        // 通知验证码组件内部开始倒计时
        // this.$refs.uCode.start();
        this.$u.api[
          this.type === "replace" ? "sendReplacePhoneCode" : "getRegisterCode"
        ]({
          phoneNo: this.phoneNo,
          tel: this.phoneNo,
        }).then((res) => {
          if (res.code == "200") {
            this.loadTime = 60;
            this.codeDisabled = false;
            this.timer = setInterval(this.getTime, 1000);
            this.$u.toast("验证码已发送");
          } else {
            // this.$refs.uCode.reset();
            this.$u.toast(res.message);
          }
        });
      } else {
        this.$u.toast("请稍后重新获取");
      }
    },
    async finish(e) {
      const _this = this;

      if (_this.type === "replace") {
        const res = await _this.$u.api.sendReplacePhoneCodeLast({
          tel: _this.phoneNo,
          code: e,
        });
        if (res.code === 200) {
          _this.$u.toast("操作成功");
          localStorage.clear();
          uni.reLaunch({
            url: `/pages/sys/home/index`,
          });
        } else {
          _this.$u.toast(res.message || "操作失败");
        }
        return;
      }

      _this.$u.api
        .registerLogin({
          phoneNo: this.phoneNo,
          code: e,
        })
        .then((res) => {
          if (res.code == "200") {
            this.$u.toast("注册成功");
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/sys/login/registerFirst?phoneNo=${this.phoneNo}&code=${e}&openId=${this.openId}`,
              });
            }, 500);
          } else if (res.message) {
            this.$u.toast(res.message);
          }
        });
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";
.remind_content {
  padding-top: 34rpx;
}
.remind-title {
  font-size: 50rpx;
  font-weight: 600;
  margin-top: 45rpx;
  padding: 45rpx 60rpx 25rpx;
}
.remind-text {
  padding: 0rpx 60rpx 45rpx;
  color: #666666;

  em {
    font-weight: bold;
    color: #242424;
    font-style: normal;
    margin: 0 5px;
  }
}
.remind-text1 {
  padding: 45rpx 60rpx 45rpx;
  font-size: 30rpx;
  color: #4e95fc;
}
</style>
